<template>
  <div class="parent">
    2323
    <div ref="prucles" class="prucles" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {

    }
  },
  computed: {

  },
  created() {

  },
  mounted() {
    var myChart = echarts.init(this.$refs.prucles, 'dark')
    var option = {
      tooltip: {
        backgroundColor: 'rgba(0,0,0,0.7)',
        textStyle: {
          color: '#fff'
        },
        formatter: '{b}数量: {c}个;占比({d}%)',
        borderColor: 'rgba(0,0,0,0.7)'
      },
      series: [
        {
          name: 'Nightingale Chart',
          type: 'pie',
          radius: [50, 100],
          center: ['50%', '50%'],
          roseType: 'area',
          // 全局样式
          // itemStyle: {
          //   borderRadius: 0,
          //   color: {
          //     type: 'linear',
          //     x: 0,
          //     y: 0,
          //     x2: 0,
          //     y2: 1,
          //     colorStops: [{
          //       offset: 0, color: '#573cb6' // 0% 处的颜色
          //     }, {
          //       offset: 1, color: '#504cdc' // 100% 处的颜色
          //     }],
          //     global: false // 缺省为 false
          //   }
          // },
          data: [
            { value: 25, name: 'Android',
              label: { color: '#ff0' }, itemStyle: {
                borderRadius: 0,
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: '#573cb6' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#504cdc' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              }},
            { value: 20, name: 'IOS', itemStyle: {
              borderRadius: 0,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'red' // 0% 处的颜色
                }, {
                  offset: 1, color: '#504cdc' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }},
            { value: 15, name: 'PC Web' },
            { value: 5, name: 'Wap Web' }
          ]
        }
      ]
    }
    myChart.setOption(option)
  },
  methods: {

  }
}
</script>

<style scoped lang="scss">
.parent{
  width: 100%;
  height: 100%;
  // background: #0a1631;
  .prucles{
    width: 100%;
    height: 100%;
  }
}
</style>
